<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
    <style>
        .itemDiv{
            line-height:30px;
            background-color: #34a784;
            text-align: center;
            margin:3px;
            padding:0 10px;
        }
        #menuObj{
            position:absolute;
            width: 120px;
            list-style: none;
            max-height: 210px;
            background-color: white;
            overflow-x: hidden;
            overflow-y: scroll;
            border:1px solid #eeeeee;
            padding:8px;
            border-radius: 2px;
            box-shadow: 3px 3px 2px #eeeeee;
            cursor: pointer;
        }
        #menuObj > li:hover{
            background-color: gray;
        }

        #menuObj::-webkit-scrollbar {
            display: none;
        }
        .contentControl{
            display: flex;
            justify-content: end;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    
    <div id="dragList" style="display: flex;justify-content: center;align-items: flex-start;">
        <div draggable="true" class="itemDiv" data-key="1">单行文本</div>
        <div draggable="true" class="itemDiv" data-key="2">多行文本</div>
        <div draggable="true" class="itemDiv" data-key="3">计数器</div>
        <div draggable="true" class="itemDiv" data-key="4">单选框</div>
        <div draggable="true" class="itemDiv" data-key="5">多选框</div>
        <div draggable="true" class="itemDiv" data-key="6">时间选择器</div>
        <div draggable="true" class="itemDiv" data-key="7">日期选择器</div>
        <div draggable="true" class="itemDiv" data-key="8">评分</div>
        <div draggable="true" class="itemDiv" data-key="9">颜色选择器</div>
        <div draggable="true" class="itemDiv" data-key="10">下拉选择框</div>
        <div draggable="true" class="itemDiv" data-key="11">开关</div>
        <div draggable="true" class="itemDiv" data-key="12">滑块</div>
        <div draggable="true" class="itemDiv" data-key="13">文字</div>
        <div draggable="true" class="itemDiv" data-key="14">HTML</div>
    </div>
    <div style="height:400px;text-align: center;line-height: 400px;border: 1px solid gray;margin:auto;overflow:auto;position: relative;" id="contentBody">
        组件拖拽
    </div>
    <div clas="contentControl">
        <button>清空</button>
    </div>
    <script>
        // ["单行文本","多行文本","计算器","单选框","多选框","时间选择器","日期选择器","评分","颜色选择器","下拉选择框","开关","滑块","文字","HTML"]
        var nowDragObj = null;//定义一个全局变量来存储每次拖拽的对象
        var dragItems= document.querySelectorAll("#dragList > div")
        dragItems.forEach(function(item){
            // item.ondrag = function(e){//我被拖动时
            //     console.log(this)
            //     console.log("drag函数 拖动时触发")
            // }
            item.onclick = function(){
                console.log("你好")
            }
            item.ondragstart = function(e){//我被拖动时，开始的那一刻
                nowDragObj = e.target;
                e.dataTransfer.setData("dragTarget",this);//不能存储对象，因为会进行toString转化
                // console.log(this)
                // console.log("ondragstart函数 开始拖动元素时触发")
            }
            /* item.ondragend = function(e){//我被拖动后，被放手了
                console.log(this)
                console.log("ondragend函数 完成拖动时触发")
            }
            item.ondragenter = function(e){//有拖动对象(包括自己作为拖动对象)进入我的领空时
                console.log(this)
                console.log("ondragenter函数 进入放置目标时触发")
            }
            item.ondragleave = function(e){//有拖动对象(包括自己作为拖动对象)离开我的领空时
                console.log(this)
                console.log("ondragleave函数 离开放置目标时触发")
            }
            item.ondragover = function(e){//有人到我身上时
                e.preventDefault()
                console.log(this)
                console.log("ondragover函数 放置在目标上时触发")
            }
            item.ondrop = function(e){//必须在ondragover中e.preventDefault()，//有拖拽元素放置到我身上
                console.log(this)
                console.log("ondrop函数 在拖动元素放置在目标区域时触发")
                console.log(e)
            }  */
        });
        var contentList = document.getElementById("tableContent");
        let contentBody = $('#contentBody')
        let contextMenuObj = null;//鼠标右键对象
        let menuListsData = [
            {
                key:"1",
                name:"单行文本",
                children:[],
            },
            {
                key:"2",
                name:"多行文本",
                children:[],
            },
            {
                key:"3",
                name:"计算器",
                children:[],
            },
            {
                key:"4",
                name:"单选框",
                children:[],
            },
            {
                key:"5",
                name:"多选框",
                children:[],
            },
            {
                key:"6",
                name:"时间选择器",
                children:[],
            },
            {
                key:"7",
                name:"日期选择器",
                children:[],
            },
            {
                key:"8",
                name:"评分",
                children:[],
            },
            {
                key:"9",
                name:"颜色选择器",
                children:[],
            },
            {
                key:"10",
                name:"下拉选择框",
                children:[],
            },
            {
                key:"11",
                name:"开关",
                children:[],
            },
            {
                key:"12",
                name:"滑块",
                children:[],
            },
            {
                key:"13",
                name:"文字",
                children:[],
            },
            {
                key:"14",
                name:"HTML",
                children:[],
            },
        ];
        //数组转对象
        let menuListsDataJson = menuListsData.reduce(function(prev,item){
            return { ...prev,[item.key]:item}
        },{})
        //创建右键列表
        function createContextMenuObj(xClientAxis,yClientAxis,menuLists=[]){
            console.log(yClientAxis)
            //获取当前浏览器可视大小
            let widInnerWidth = window.innerWidth;
            let heiInnerHeight = window.innerHeight;
            let xDis = widInnerWidth - xClientAxis;
            let yDis = heiInnerHeight- yClientAxis;
            let leftChange =0;
            //120为最大宽度
            if(xDis <=  (120+14)){
                leftChange = xClientAxis-120-14;
            }else{
                leftChange =xClientAxis
            }
            let topChange =0;
            //210为最大高度
            if(yDis <= 210){
                topChange=  heiInnerHeight-210-17
            }else{
                topChange =yClientAxis-17;
            }
            let obj = $('<ul id="menuObj"></ul>')
            obj.css({
                'top':topChange + 'px',
                'left':leftChange + 'px',
            })
            for(let i=0 ;i< menuLists.length ;i++){
                obj.append("<li data-key='"+ menuLists[i].key +"'>"+ menuLists[i].name +"</li>")
            }
            return obj
        }


        //拖拽控件事件
        contentBody.on('dragover',function(e){
            e.preventDefault();//ondrop事件才能触发
            // console.log("我是ondragover")
            // console.log(this)
        })
        contentBody.on('drop',function(e){
            if(!nowDragObj)return;
            e.preventDefault();//阻值浏览器对拖拽对象进行处理
            var dropData = e.dataTransfer.getData("dragTarget");
            if(this.innerText == "组件拖拽"){
                this.innerHTML = "";
            }
            // console.log(nowDragObj.toString())
            this.appendChild(nowDragObj.cloneNode(true))//深copy
            nowDragObj = null;
        })
        //右键事件
        contentBody.on('contextmenu',function(e){
            e.preventDefault();
            contextMenuObj && contextMenuObj.remove();
            contextMenuObj = createContextMenuObj(e.clientX,e.clientY,menuListsData)
            $('body').append(contextMenuObj)
            //给所有menuObj中的li标签添加点击事件和
            $("#menuObj > li").off('click').on('click',function(){
                let keyValue = $(this).attr('data-key')
                if(contentBody.text().trim() == "组件拖拽"){
                    contentBody.html('')
                }
                contentBody.append('<div draggable="true" class="itemDiv" data-key='+ keyValue +'>'+ menuListsDataJson[keyValue].name +'</div>')
                contextMenuObj && contextMenuObj.remove();
                return false
            })
            return false
        })

    
        //点击文档时，清除oncentextmenu
        $('body').click(function(){
            contextMenuObj && contextMenuObj.remove();
        })


    </script>
</body>
</html>